<template>
    <div :class="['bitCharts',{'dark':state == 'dark'}]">
        <div class="bit-title">
            <span class="name">误码率</span>
            <span class="name">功率误差</span>
        </div>
        <div class="bit-table">
            <span :class="['value',{'dark':state == 'dark'}]">0.1</span>
            <span :class="['value',{'dark':state == 'dark'}]">0.1</span>
        </div> 
    </div>  
</template>

<script lang="ts">
import { defineComponent, reactive, ref, onMounted} from 'vue'
import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';
import { listeners, nextTick } from 'process';
import getMyMixin from './myMixin';
export default defineComponent({
    name: 'BitError',
    setup(props, ctx) {
        const dcolor = ref('#569ff8')
        let url = ''
        const state = ref('')
        let diagramData = ref([0,0])
        const Mixin = getMyMixin("")
        const setData = (data: any) => {
            diagramData = data
        }
        const readFile = (filePath: any) => {
            let result = ""
            var xhr = new XMLHttpRequest();
            xhr.open("GET",filePath,false)
            xhr.onload = function (e) {
                if(xhr.readyState === 4){
                    if(xhr.status === 200){
                        result = xhr.responseText
                    } else {
                        console.error(xhr.statusText)
                    }
                }
            };
            xhr.send(null)
            return result
        }
        const getImgUrl = async () => {
            let canvas = await html2canvas(document.querySelector('.bitCharts') as HTMLElement, {
              allowTaint: true,
            })
            let pageData = canvas.toDataURL('image/png');
            return pageData;     
        }
        const saveimg = () => {
            nextTick(async () => {
                // let link = document.createElement('a');
                // link.style.display = 'none'
                // link.href = await getImgUrl()
                // // 获取文件名
                // // download 属性定义了下载链接的地址而不是跳转路径
                // link.setAttribute('download', 'bitError')
                // document.body.appendChild(link)
                // link.click()
                Mixin.saveImg('bitError',await getImgUrl())
            })
        }
        const savePDF = () => {
            nextTick(async () => {
                var doc = new jsPDF('l', 'pt', 'letter')
                doc.addImage(await getImgUrl(),100, 5, 590, 590,'img')
                doc.save('bitError.pdf')
            })
        }
        const reload = () => {
        }
        const changeState = (val: any) => {
            state.value = val
        }
        return {
            getImgUrl,
            saveimg,
            savePDF,
            reload,
            setData,
            changeState,
            dcolor,
            state
        }
    }
})
</script>

<style lang="scss" scoped>
.bitCharts{
    width:100%;
    height: 65%;
    padding-top: 15%;
}
.dark{
    background-color: black;
    color: white;
}
.darkValue{
    color: white;
}
.bit-title{
    background-color: #F5F7FA;
    margin-left: 15%;
    width: 70%;
    padding: 10px;
    font-size: 12px;
    display: flex;
    justify-content: space-between;
    border-style: solid;
    border-color: #EBEEF5;
    border-width: 0.5px;
}
.bit-table{
    border-style: solid;
    border-color: #EBEEF5;
    border-width: 0.5px;
    margin-left: 15%;
    width: 70%;
    padding: 10px;
    font-size: 12px;
    display: flex;
    justify-content: space-between;   
}
.name {
    color:black;
    text-align: center;
    padding-top: 7px;
    width: 50%;
    flex-shrink: 0;
    font-size: 12px;
}
.value {
    text-align: center;
    padding-top: 7px;
    flex: 1;
    width: 50%;
    font-size: 12px;
}
</style>